<template>
	<view>
		<div style="height: 96rpx; display: flex;justify-content: space-between;align-items: flex-end;background-color: rgba(255, 255, 255, 1);">
			<div v-for="(item, index) in title" :key="index" style="text-align: center;width: 33%;" @click="changeclass(index)">
				<div style="margin-bottom: 20rpx;">{{ item.title }}</div>
				<div :class="{ color: item.bottom }" style="width: 66rpx;height: 8rpx;margin: 0rpx auto;"></div>
			</div>
		</div>
		<div class="bigbox">
			<div v-for="(item, index) in data" style="display: flex;" :class="{ move: item.deleate }">
				<div class="smallbox" :key="index">
					<div style="display: flex;justify-content: space-between;align-items: center;">
						<div style="width: 100%;display: flex;justify-content: flex-start;align-items: center;">
							<div class="imgbox">
								<img
									:src="item.url"
									alt=""
									style="width: 32px;
		height: 32px;"
								/>
							</div>
							<span style="margin-left: 26rpx; color: rgba(56, 56, 56, 1);font-size: 28rpx;font-weight: bold;">{{ item.name }}</span>
							<span style="margin-left: 26rpx; color: rgba(56, 56, 56, 1);font-size: 28rpx;font-weight: bold;">{{ item.class }}</span>
						</div>
						<span v-if="!item.minute" :class="{ colorchange: item.statecolor }" style="width: 300rpx; text-align: right; font-size: 28rpx;color: rgba(166, 166, 166, 1);">
							{{ item.statetext }}
						</span>
						<span
							v-if="item.minute"
							:class="{ colorchange: item.statecolor }"
							style="width: 300rpx; text-align: right; font-size: 28rpx;color: rgba(166, 166, 166, 1);font-weight: bold;"
						>
							{{ item.statetext }}
						</span>
					</div>
					<div class="hospitalbox">
						<span class="title">时间</span>
						<span>{{ item.time }}</span>
						<br />
						<div style="display: flex;justify-content: flex-start;">
							<span class="title">医院</span>
							<span style="width:70%;height:100rpx;overflow: hidden ;">{{ item.opinion }}</span>
						</div>
					</div>
					<div class="button">
						<div @click="changedeleate(index)">删除订单</div>
						<div v-if="item.state == 1">已完成</div>
						<div v-if="item.state == 2">客服介入</div>
						<div v-if="item.state == 3">再次服务</div>
						<div v-if="item.state == 0">取消订单</div>
						<div v-if="item.state == 0">去支付</div>
					</div>
				</div>
				<div v-if="item.deleate" class="deleate">删除</div>
			</div>
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: [
				{
					title: '全部',
					bottom: true,
					class: 0
				},
				{
					title: '待支付',
					bottom: false,
					class: 1
				},
				{
					title: '服务中',
					bottom: false,
					class: 2
				},
				{
					title: '已完成',
					bottom: false,
					class: 3
				},
				{
					title: '已取消',
					bottom: false,
					class: 4
				}
			],
			data: [
				{
					detial: false,
					url: require('../asset/myopinion.svg'),
					name: '张飞飞',
					state: 0,
					statetext: '',
					statecolor: '',
					opinion: '黑龙江省第一医院',
					time: '2021-12-16 13:00-13:30',
					deleate: false
				},
				{
					detial: false,
					url: require('../asset/myopinion.svg'),
					name: '于珠珠',
					state: 0,
					statetext: '',
					statecolor: '',
					opinion: '5天',
					time: '2021-12-16 13:00-13:30',
					deleate: false
				},
				{
					detial: false,
					url: require('../asset/myopinion.svg'),
					name: '于珠珠',
					state: 0,
					statetext: '',
					statecolor: '',
					opinion: '5天',
					time: '2021-12-16 13:00-13:30',
					deleate: false
				}
			],
			data1: [
				{
					detial: false,
					url: require('../asset/myopinion.svg'),
					name: '张飞飞',
					state: 0,
					statetext: '',
					statecolor: '',
					opinion: '黑龙江省第一医院',
					time: '2021-12-16 13:00-13:30',
					deleate: false,
					minute: 14,
					second: 59,
					istime: 1
				},
				{
					detial: false,
					url: require('../asset/myopinion.svg'),
					name: '于珠珠',
					state: 1,
					statetext: '',
					statecolor: '',
					opinion: '5天',
					time: '2021-12-16 13:00-13:30',
					deleate: false
				},
				{
					detial: false,
					url: require('../asset/myopinion.svg'),
					name: '于珠珠',
					state: 2,
					statetext: '',
					statecolor: '',
					opinion: '5天',
					time: '2021-12-16 13:00-13:30',
					deleate: false
				},
				{
					detial: false,
					url: require('../asset/myopinion.svg'),
					name: '于珠珠',
					state: 3,
					statetext: '',
					statecolor: '',
					opinion: '5天',
					time: '2021-12-16 13:00-13:30',
					deleate: false
				},
				{
					detial: false,
					url: require('../asset/myopinion.svg'),
					name: '于珠珠',
					state: 4,
					statetext: '',
					statecolor: '',
					opinion: '5天',
					time: '2021-12-16 13:00-13:30',
					deleate: false
				}
			]
		};
	},
	created() {
		this.changeclass(0);
	},
	methods: {
		changeclass(index) {
			this.title.forEach(item => {
				item.bottom = false;
			});
			this.title[index].bottom = true;
			this.data.forEach(item => {
				item.deleate = false;
			});
			if (index == 1) {
				let dataarr = [];
				this.data1.forEach(item => {
					if (item.state == 0) {
						item.statecolor = true;
						dataarr.push(item);
					} else {
					}
				});
				this.data = dataarr;
			} else if (index == 2) {
				let dataarr = [];
				this.data1.forEach(item => {
					if (item.state == 1) {
						dataarr.push(item);
					} else {
					}
				});
				this.data = dataarr;
			} else if (index == 3) {
				let dataarr = [];
				this.data1.forEach(item => {
					if (item.state == 2) {
						dataarr.push(item);
					} else {
					}
				});
				this.data = dataarr;
			} else if (index == 4) {
				let dataarr = [];
				this.data1.forEach(item => {
					if (item.state == 3) {
						dataarr.push(item);
					} else {
					}
				});
				this.data = dataarr;
			} else {
				this.data = this.data1;
				this.data.forEach(item => {
					if (item.state == 0) {
						item.statecolor = true;
						let timer = setInterval(() => {
							item.statetext = '待支付 ' + item.minute + ':' + item.second;
							item.istime = 0;
							item.second--;
							if (item.second == 0 && item.minute != 0) {
								item.minute--;
								item.second = 59;
							} else if (item.minute == 0 && item.second == 0) {
								clearInterval(timer);
							} else if (item.second < 10 && item.second > 0) {
								item.second = '0' + item.second;
							}
						}, 1000);
						if (item.istime == 1) {
							timer;
						} else {
							clearInterval(timer);
						}
					} else if (item.state == 1) {
						item.statetext = '服务中';
						item.statecolor = true;
					} else if (item.state == 2) {
						item.statetext = '已完成';
						item.statecolor = false;
					} else if (item.state == 3) {
						item.statetext = '已取消';
						item.statecolor = false;
					} else if (item.state == 4) {
						item.statetext = '已完成';
						item.statecolor = false;
					}
				});
			}
		},
		changedeleate(index) {
			this.data.forEach(item => {
				item.deleate = false;
			});
			this.data[index].deleate = true;
		}
	}
};
</script>

<style>
.color {
	background-color: rgba(65, 171, 133, 1);
}
.smallbox {
	width: 100%;
	padding: 20rpx;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 6px;
	margin-top: 20rpx;
}
.bigbox {
	padding: 0 20rpx;
	overflow-y: hidden;
}
.imgbox {
	width: 39px;
	height: 39px;
	background-color: rgba(65, 171, 133, 1);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.button {
	width: 100%;
	display: flex;
	justify-content: flex-end;
}
.button div {
	width: 176rpx;
	height: 64rpx;
	border: rgba(166, 166, 166, 1) 1px solid;
	border-radius: 32rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 46rpx;
}
.button div {
	margin-right: 20rpx;
}
.button div:last-child {
	background-color: rgba(65, 171, 133, 1);
	color: rgba(255, 255, 255, 1);
	margin-right: 0;
}
.hospitalbox {
	margin-top: 40rpx;
}
.hospitalbox span {
	margin-left: 28rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: rgba(56, 56, 56, 1);
}
.hospitalbox .title {
	font-weight: normal;
	color: rgba(128, 128, 128, 1);
	margin-left: 0;
}
.colorchange {
	color: rgba(65, 171, 133, 1) !important;
}
.move {
	margin-left: -30%;
}
.deleate {
	width: 20%;
	margin-top: 20rpx;
	margin-left: 20rpx;
	background-color: rgba(212, 48, 48, 1);
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgba(255, 255, 255, 1);
	font-size: 32rpx;
	font-weight: bold;
}
.hasevaluate {
	background-color: rgba(255, 255, 255, 1) !important;
	border: rgba(65, 171, 133, 1) solid 2rpx !important;
	color: rgba(65, 171, 133, 1) !important;
}
.evaluate {
	background-color: rgba(255, 255, 255, 1);
	border: rgba(65, 171, 133, 1) solid 2rpx !important;
	color: rgba(65, 171, 133, 1);
}
</style>
